<template>
	<view class="pb50">
		<uni-card spacing="0" margin="0" :is-shadow="false" :border="false">
			<view class="details-dom">
				<view class="flex-row flex-row-space-between item-dom">
					<view class="title">课程学年</view>
					<view class="content">{{listTypeValue(detailsData.schoolYear)}}</view>
				</view>
				<view class="flex-row flex-row-space-between item-dom">
					<view class="title">备注</view>
					<view class="content">{{detailsData.comment}}</view>
				</view>
			</view>
			<uni-section title="成绩附件图片" type="line">
				<acImage v-model:imageList="imageList"/>
			</uni-section>
		</uni-card>
	</view>

</template>

<script lang="ts" setup>
	import acImage from "@/pages/student/user/a-components/ac-image.vue";
	import { Grade } from "@/api/tables/Grade"
	import { getDictTypeList } from "@/utils/storage"
	import { gradeDetail } from "@/api/user"

	import { ref, computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'

	let detailsData = ref<Grade>({});
	let listType = ref([])
	let imageList = ref([])

	const listTypeValue = computed(() => (key: string) => {
		let list = listType.value.filter(item => item.value == key)
		if (list.length) {
			return list[0].text
		}
		return ''
	})

	onLoad((option) => {
		getDetail(option.itemID, option.jobseekerId)
	});
	
	getDictTypeList('SCHOOL_YEAR_TYPE').then(res => {
		listType.value = res
	});

	function getDetail(academicAchievementId, jobseekerId) {
		gradeDetail({ academicAchievementId, jobseekerId}).then(res => {
			if (res.code == '200') {
				let list = res.data.achievementList || []
				list.forEach(item => {
					item.url = item.thumbnail
				})
				imageList.value = list
				detailsData.value = res.data
			}
		})
	}

</script>

<style lang="scss" scoped>
	.img-dom {
		margin: 0 10px 10px 0;

		.img-item {
			width: 100px;
			height: 100px;
			border-radius: 6rpx;
		}

		.img-bnt {
			position: relative;
			top: -24px;
			border-radius: 0 0 6rpx 6rpx;
			background: rgba(0, 0, 0, 0.3);
			line-height: 1;

			.img-bnt-item {
				flex: 1;
				text-align: center;
			}
		}
	}

	.sticky-b10 {
		position: sticky;
		bottom: 0rpx;
		background: #f5f5f5;
	}
</style>